<template>

  <div class="demo-form-top">
    <div class="demo-input-size">
      <label style="margin-right: 10px;">车牌号 </label>
      <el-input
          style="width: 200px"
          v-model="input1"
          class="w-50 m-2"
          size="large"
          placeholder="请输入车牌号搜索"
          :suffix-icon="Search"
      />
    </div>
    <div class="demo-input-size">
      <label style="margin-right: 10px;">订单号 </label>
      <el-input
          style="width: 200px"
          v-model="input2"
          class="w-50 m-2"
          size="large"
          placeholder="请输入订单号搜索"
          :suffix-icon="Search"
      />
    </div>
    <div class="demo-input-size">
      <label style="margin-right: 10px;">状态</label>
      <el-select v-model="input3" class="m-2" placeholder="还车单状态" size="large">
        <el-option label="待审核" :value="0"/>
        <el-option label="审核完成" :value="1"/>
      </el-select>
    </div>
    <div class="demo-button-size">
      <el-button type="primary" @click="getReturnCarList">搜索</el-button>
    </div>
    <div class="demo-button-size">
      <el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
        <template #reference>
          <el-button type="danger"  :disabled="delBtlStatu">批量删除</el-button>
        </template>
      </el-popconfirm>
    </div>
  </div>


  <div class="demo-table-size">
    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        stripe
        border
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"  />
      <el-table-column property="orderNum" label="订单号" width="120" align="center" />
      <el-table-column property="carNum" label="车牌号" width="120" align="center" />
      <el-table-column property="rentalTime" label="租赁日期" width="120" align="center">
        <template #default="scope">
          {{ new Date(scope.row.rentalTime).toLocaleDateString() }}
        </template>
      </el-table-column>
      <el-table-column property="returnTime" label="原定还车日期" width="120" align="center">
        <template #default="scope">
          {{ new Date(scope.row.returnTime).toLocaleDateString() }}
        </template>
      </el-table-column>
      <el-table-column property="realTime" label="实际还车日期" width="120" align="center">
        <template #default="scope">
          {{ new Date(scope.row.realTime).toLocaleDateString() }}
        </template>
      </el-table-column>
      <el-table-column property="wearMoney" label="磨损费用"  align="center" />
      <el-table-column property="refundMoney" label="需退还费用(负数代表用户需要补偿费用)" width="200px" align="center" />
      <el-table-column property="status" label="状态"  align="center" >
        <template #default="scope">
            <el-tag type="danger" v-if="scope.row.status == 0">待审核</el-tag>
            <el-tag type="success" v-if="scope.row.status == 1">审核完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="blur" label="磨损情况描述" align="center" show-overflow-tooltip />
      <el-table-column property="icon"  align="center" width="200" label="操作">
        <template #default="scope">
          <el-button type="primary" v-if="scope.row.status == 0" @click="editHandle(scope.row.id)" >审核</el-button>
          <el-tag type="success" v-if="scope.row.status == 1">已审核</el-tag>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
            <template #reference>
              <el-button type="danger"  >删除</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>

    </el-table>
    <div style="margin-top: 15px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="float: right;margin-right: 30px"
          small
          background
          :page-sizes="[5, 10, 20, 30]"
          v-model:total="pageParam.total"
          layout="total, sizes, prev, pager, next"
          class="mt-4"
          v-model:current-page="pageParam.current"
          v-model:page-size="pageParam.size"
      />


    </div>
  </div>

  <!--新增对话框-->
  <el-dialog
      title="还车审核"
      v-model="dialogVisible"
      width="600px"
      :before-close="handleClose">

    <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="editForm"  >
      <el-form-item prop="id" >
        <el-input type="hidden" v-model="editForm.id" ></el-input>
      </el-form-item>

      <el-form-item label="订单号"  prop="orderNum" label-width="120px">
        <el-input v-model="editForm.orderNum" disabled />
      </el-form-item>
      <el-form-item label="车牌号"  prop="carNum" label-width="120px">
        <el-input v-model="editForm.carNum" disabled />
      </el-form-item>
      <el-form-item label="需返还费用"  prop="refundMoney" label-width="120px">
        <el-input v-model="editForm.refundMoney" disabled />
      </el-form-item>

      <el-form-item label="实际还车日期" prop="realTime" label-width="120px">
        <el-date-picker
            v-model="editForm.realTime"
            type="date"
            placeholder="还车日期"
            style="width: 100%"
            @change="comput"
        />
      </el-form-item>
      <el-form-item label="磨损费用"  prop="wearMoney" label-width="120px">
            <el-input-number  v-model="editForm.wearMoney"   :min="0" :max="1000000"  @change="comput" />
      </el-form-item>

      <el-form-item label="磨损情况描述"  prop="blur" label-width="120px">
        <el-input  v-model="editForm.blur"  :autosize="{ minRows: 5, maxRows: 15}"  type="textarea"  autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <div style="width:400px;height: 30px;background-color:#F5F7FA;padding-top: 5px;text-align: center;margin-left: 100px;margin-bottom:10px;color: #cccccc">磨损费用和实际还车日期发生变化,需返还费用也会随之改变</div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm(ruleFormRef)">取 消</el-button>
      <el-popconfirm title="确定审核通过吗，通过后无法修改?" @confirm="submitForm(ruleFormRef)">
        <template #reference>
          <el-button type="primary">通过</el-button>
        </template>
      </el-popconfirm>
    </div>
  </el-dialog>



</template>
<script setup>


import {Search} from "@element-plus/icons-vue";
import {inject, nextTick, onMounted, reactive, ref} from "vue";
import UploadUtil from "@/components/UploadUtil.vue";
import { ElMessage } from 'element-plus';
import axios from "@/axios.js"

const baseUrl = '../../public/img/'



const input1 = ref('')
const input2 = ref('')
const input3 = ref('')

onMounted(()=>{
  getReturnCarList()
})

const pageParam = ref({
  current:1,
  total:10,
  size:5
})

//分页查询
const getReturnCarList = ()=>{
  axios.get(`/returnCar/list`,{
    params: {
      carNum: input1.value,
      orderNum: input2.value,
      status: input3.value,
      current: pageParam.value.current,
      size: pageParam.value.size
    }
  }).then(res=>{
    tableData.value = res.data.records
    pageParam.value.current = res.data.current
    pageParam.value.total= res.data.total
    pageParam.value.size = res.data.size
  })
}

const handleSizeChange = (val)=>{
  console.log(`每页 ${val} 条`)
  pageParam.value.size = val
  getReturnCarList()
}
const handleCurrentChange = (val)=>{
  console.log(`当前页: ${val}`)
  pageParam.value.current = val
  getReturnCarList()
}


const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  console.log("勾选")
  console.log(val)
  multipleSelection.value = val
  delBtlStatu.value = val.length==0
}
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach(row => {
      multipleTableRef.value.toggleRowSelection(row)
    });
  } else {
    multipleTableRef.value.clearSelection();
  }
}

const delBtlStatu = ref(true)

//删除/批量删除
const delHandle = (id) => {

  var ids = []
  if (id) {
    ids.push(id)
  } else {
    multipleSelection.value.forEach(row => {
      ids.push(row.id)
    })
  }
  console.log(ids)

  axios.post("/returnCar/delete", ids).then(res => {
    ElMessage({
      showClose: true,
      message: '恭喜你，删除成功',
      type: 'success',
      onClose: () => {
        getReturnCarList()
      }
    });
  })
}


const tableData = ref(
    [
      {


      }
    ]
)




//新增/编辑
const dialogVisible = ref(false)
const handleClose = ()=>{
  dialogVisible.value = false
  editForm.value = ref({})
}
const editForm = ref({


})


const ruleFormRef = ref(null)
const rules = reactive({
  wearMoney: [
    { required: true, message: '不能为空', trigger: 'change' },
  ],
  realTime: [
    { required: true, message: '不能为空', trigger: 'change' },
  ],

})
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(editForm.value)
      axios.post('/returnCar/process', editForm.value)
          .then(res => {

            ElMessage({
              showClose: true,
              message: '审核通过',
              type: 'success',
              onClose: () => {
                getReturnCarList()
              }
            });
            resetForm(formEl)

          })
    } else {
      console.log('error submit!', fields)
    }
  })
}


const comput = ()=>{
    axios.post('/returnCar/comput', editForm.value).then(res=>{
          editForm.value.refundMoney = res.data
    })
}



const editHandle = (id) => {

  axios.get('/returnCar/info/' + id).then(res => {
    dialogVisible.value = true
    nextTick(() => {
      editForm.value = res.data
    })

  })
}





const resetForm = (formEl) => {
  if (!formEl) return
  dialogVisible.value = false
  formEl.resetFields()
}





</script>


<style scoped>
.demo-form-top{

}

.demo-button-size{
  float: left;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-left: 7px;
}

.demo-input-size{
  float: left;
  width: 300px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.demo-table-size{

  margin-top: 20px;
}

.dialog-footer{
  margin-left: 100px;
}


</style>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-table__header thead th {
  background-color: #F5F7FA!important;
}

</style>